<template>
	<view>
		<my-loader :show="showLoader" :data="list">
			<!-- #ifdef MP-WEIXIN -->
			<button @click="gotoInfo" class="fixed-top font text-primary">新增</button>
			<!-- #endif -->
			
			<view style="margin-top: 70rpx;">
				<uni-swipe-action ref="swipeAction">
					<uni-swipe-action-item v-for="(item,index) in list" :key="index" :right-options="options" @click="swipeClick($event,index)">
						<view class="p-2 border-bottom flex flex-row">
							<view class="flex flex-1">{{item.name}}</view>
							<view class="flex flex-1">撒发大水asdasd</view>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			<uni-load-more @clickLoadMore="loadMore" :status="loadMoreStatus"></uni-load-more>
		</my-loader>
<!-- 		<template v-if="showLoader">
			<zero-loading :mask="true" type="triangle"/>
		</template>
		<template v-else>
			<template v-if="list.length>0">
				<uni-swipe-action ref="swipeAction">
					<uni-swipe-action-item v-for="(item,index) in list" :key="index" :right-options="options" @click="swipeClick($event,index)">
						<view class="p-2 border-bottom">
							{{item.deptName}}
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</template>
			<template v-else>
				<my-nothing/>
			</template>
		</template> -->
	</view>
</template>

<script setup name="DeptIndex">
import { ref,getCurrentInstance } from 'vue';
import {onLoad,onUnload,onNavigationBarButtonTap,onPullDownRefresh,onReachBottom } from '@dcloudio/uni-app';
import common from '../common/js/common';

const {proxy} = getCurrentInstance();
const showLoader=ref(true);
const pageNum=ref(1);//分页的当前页码属性
const pageSize=ref(10);//每页显示10条数据
const loadMoreStatus=ref('noMore');//上拉加载的提示状态
const list=ref([]);
const options=[{text:'修改',style:{backgroundColor:'#007aff'}},{text:'删除',style:{backgroundColor:'#dd524d'}}];


function gotoInfo() { 
	uni.navigateTo({url:'/pages/dept_info'});
}

//下拉刷新数据
const downRefresh=()=>{
	pageNum.value=1;
	getData();
}

//上拉加载数据
function loadMore() { 
	if(loadMoreStatus.value!='more') return;
	loadMoreStatus.value='loading';
	pageNum.value++;
	getData();
}

//执行数据列表的查询
function getData() {
	uni.request({
		url: common.baseUrl+'/app/dept/list',
		method: 'GET',
		data: {pageNum:pageNum.value,pageSize:pageSize.value},
		success: res => {
			//list.value=list.value.concat(res.data.list);
			if(pageNum.value>1){//上拉加载时追加数据
				list.value=[...list.value,...res.data.list];
			}else{//下拉刷新是覆盖数据
				list.value=res.data.list;
				uni.stopPullDownRefresh();
			}
			loadMoreStatus.value=res.data.loadMoreStatus;
		},
		complete: () => {
			showLoader.value=false;
		}
	});
}

function swipeClick(e,index) {
	proxy.$refs.swipeAction.closeAll();
	if(e.index==0){//修改操作
		uni.navigateTo({
			url:'/pages/dept_info?dept='+encodeURIComponent(JSON.stringify(list.value[index]))
		})
	}else{//删除操作
		uni.showModal({
			title:'提示',
			content:'确定要删除当前数据吗?',
			success: (res) => {
				if(res.confirm){
					uni.showLoading({
						title: '正在删除...',
						mask: true
					});
					uni.request({
						url: common.baseUrl+'/admin/dept/delete',
						method: 'DELETE',
						header:{
							'content-type':'application/x-www-form-urlencoded'
						},
						data: {id:list.value[index].id},
						success: res => {
							downRefresh();
						},
						fail: (e) => {
							console.log(e);
						},
						complete: () => {
							uni.hideLoading();
						}
					});
				}
			}
		})
	}
	
}

//监听下拉刷新动作
onPullDownRefresh(()=>{
	downRefresh();
});

//监听上拉加载动作
onReachBottom(()=>{
	loadMore();
});

//监听右上角菜单按钮
onNavigationBarButtonTap((e)=>{
	uni.navigateTo({url:'/pages/dept_info'});
});

onLoad((e)=>{
	getData();
	//监听页面的通讯事件
	uni.$on('refresh_dept_list',()=>{
		downRefresh();
	});
});

onUnload(()=>{
	//关闭监听页面的通讯事件
	uni.$off('refresh_dept_list');
});


</script>
<style scoped>
.content {
   position: absolute;
	left: 50%;
	top: 50%;
	/* 左/上边缘向左/上移动自身宽/高度的一半 */
	transform: translate(-50%, -50%);
}
</style>